<script setup lang="ts">
import SingleViewer from "@renderer/view/components/singleViewer/SingleViewer.vue";
import { computed, onBeforeUnmount, onMounted, ref } from "vue";
import { EnumViewType, loadSingleViewType } from "@renderer/assets/types";
import { useSystemSettingStore } from "@renderer/store/pinia/systemSetting";
import { useViewManagerStore } from "@renderer/store/pinia/viewManager";
import { useGetCurrentView } from "@renderer/view/hooks/common";
import { useImageDataStore } from "@renderer/store/pinia/imageData";
import { postRequest } from "@renderer/api/request";
import API from "@renderer/api/api";
import { useHandlerTouchOrMouseOp } from "@renderer/view/components/singleViewer/useHandlerTouchOrMouseOp";
import _ from "lodash";

const systemStore = useSystemSettingStore();
const viewStore = useViewManagerStore();
const imgStore = useImageDataStore();
const { tabId } = useGetCurrentView();
const viewArr = computed(() => {
  return viewStore.tabSubView[tabId];
});

const activeView = computed(() => {
  return viewStore.tabActiveViewIdObj[tabId];
});

const setActiveView = (view: any) => {
  viewStore.setTabActiveViewId(tabId, view);
};

const getPosition = (view) => {
  let position = "";
  if (view.viewType === EnumViewType.ax) {
    switch (systemStore.mprLayout.key) {
      case "a":
        position = "a-lt";
        break;
      case "b":
        position = "l1";
        break;
      case "d":
        position = "d-t";
        break;
      case "e":
        position = "e-lt";
        break;
      default:
        break;
    }
  } else if (view.viewType === EnumViewType.sag) {
    switch (systemStore.mprLayout.key) {
      case "a":
        position = "a-lb";
        break;
      case "b":
        position = "l2";
        break;
      case "d":
        position = "d-lb";
        break;
      case "e":
        position = "e-rt";
        break;

      default:
        break;
    }
  } else {
    switch (systemStore.mprLayout.key) {
      case "a":
        position = "a-r";
        break;
      case "b":
        position = "l3";
        break;
      case "d":
        position = "d-rb";
        break;
      case "e":
        position = "e-lb";
        break;
      default:
        break;
    }
  }
  return position;
};

const getContainerClass = computed(() => {
  let ans = "";
  switch (systemStore.mprLayout.key) {
    case "a":
      ans = "container-a";
      break;
    case "b":
      ans = "container-b";
      break;
    case "c":
      ans = "container-c";
      break;
    case "d":
      ans = "container-d";
      break;
    case "e":
      ans = "container-e";
      break;
    default:
      ans = "container-a";
      break;
  }
  return ans;
});

const statusRef = ref({
  firstLoadFinish: true, // 是否加载了第一次的视图？
  isFirstShowFullScreen: false, // 是否已经显示过全屏？ 显示过则已经加载了全屏的组件
  isFullScreen: false, // 当前是否是全屏状态
});
const handleToggleFullScreen = (view) => {
  viewStore.setTabActiveViewId(tabId, view);
  statusRef.value.isFullScreen = !statusRef.value.isFullScreen;
  if (statusRef.value.isFullScreen) {
    statusRef.value.isFirstShowFullScreen = true;
  }
  imgStore.clearPercentRule(view.viewId);
};

const setAspect = async (args) => {
  const { viewId, width, height, viewType } = args;
  handleAspectChange({ viewId, width, height, viewType });
};

const handleAspectChange = ({ viewId, width, height, viewType }) => {
  setAspect2Server({ viewId, width, height, viewType });
  return;
};

const setAspect2Server = async ({ viewId, width, height, viewType }) => {
  const msg: loadSingleViewType = {
    opType: "setSize",
    size: {
      width,
      height,
    },
    viewId: viewId,
    viewType,
  };
  await postRequest(API.setSize, msg);
};
const activeViewHasImg = computed(() => {
  const viewId = activeView.value.viewId;
  return viewId in imgStore.imgSrcObj;
});

const managerRectArea = ref();
const managerRef = ref();

let resizeObserver: ResizeObserver;
const watchResize = () => {
  resizeObserver = new ResizeObserver(
    _.debounce((entries) => {
      managerRectArea.value = managerRef.value.getBoundingClientRect();
    }),
  );
  // 绑定监听的dom
  resizeObserver.observe(managerRef.value);
};

onMounted(() => {
  watchResize();
});
onBeforeUnmount(() => {
  resizeObserver.disconnect();
});

const {
  handleMousedown,
  handleMousemove,
  handleMouseup,
  handleTouchStart,
  handleTouchEnd,
  handleTouchmove,
  handleWheel,
} = useHandlerTouchOrMouseOp(managerRectArea, activeViewHasImg);
</script>

<template>
  <div
    class="w-full h-full"
    @mousedown="handleMousedown"
    @mousemove="handleMousemove"
    @mouseup="handleMouseup"
    @touchstart="handleTouchStart"
    @touchmove="handleTouchmove"
    @touchend="handleTouchEnd"
    @mouseleave="handleMouseup"
    @wheel="handleWheel"
    ref="managerRef"
    :class="getContainerClass"
  >
    <div
      v-if="!statusRef.isFullScreen"
      v-for="item in viewArr"
      :class="[
        activeView.viewId === item.viewId ? 'active' : 'inactive',
        getPosition(item),
        item.viewType,
      ]"
      class="img-operate-container box-border"
      @mousedown="setActiveView(item)"
      :key="item.viewId"
    >
      <single-viewer
        :view-id="item.viewId"
        :key="item.viewId"
        @dblclick="handleToggleFullScreen(item)"
        :view-type="item.viewType"
        :img-src="imgStore.imgSrcObj[item.viewId]"
        :center="imgStore.mprCenterObj[item.viewId]"
        :fourCornerInfo="imgStore.fourCornelObj[item.viewId]"
        @set-aspect="(args) => setAspect(args)"
      />
    </div>
    <div v-else class="row-span-full col-span-full active">
      <single-viewer
        :view-id="activeView.viewId"
        :key="activeView.viewId"
        @dblclick="handleToggleFullScreen(activeView)"
        :view-type="activeView.viewType"
        :img-src="imgStore.imgSrcObj[activeView.viewId]"
        :center="imgStore.mprCenterObj[activeView.viewId]"
        :fourCornerInfo="imgStore.fourCornelObj[activeView.viewId]"
        @set-aspect="(args) => setAspect(args)"
      />
    </div>
  </div>
</template>

<style scoped>
.container-a {
  @apply grid grid-cols-2 grid-rows-2;
}

.a-r {
  @apply row-start-1 row-span-2 col-start-2;
}

.a-lt,
.a-lb,
.a-r {
  @apply border-4 border-[#d1d5db] box-border overflow-hidden;
}

.active {
  @apply border-4  border-(--color-active);
}

.inactive {
  @apply border-4 border-[#d1d5db];
}

.container-b {
  @apply grid grid-cols-3;
}

.container-c {
  @apply grid grid-rows-3;
}

.container-d {
  @apply grid grid-cols-2 grid-rows-2;
}

.d-t {
  @apply col-start-1 col-span-2;
}

.container-e {
  @apply grid grid-cols-2 grid-rows-2;
}
</style>
